<template>
  <div class="app-container">

    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getList()">
      <el-form-item>
        <el-select v-model="dataForm.tagid" filterable clearable placeholder="用户标签">
          <el-option v-for="item in wxUserTags" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.nickName" placeholder="昵称" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.city" placeholder="城市" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.qrSceneStr" placeholder="关注场景值" clearable />
      </el-form-item>
      <el-form-item>
        <el-button @click="getList()">查询</el-button>
        <el-button v-hasPermi="['wx:wxuser:save']" type="primary" :disabled="dataListSelections.length <= 0" @click="$refs.wxUserTagging.init('tagging')">绑定标签</el-button>
        <el-button v-hasPermi="['wx:wxuser:save']" type="primary" :disabled="dataListSelections.length <= 0" @click="$refs.wxUserTagging.init('untagging')">解绑标签</el-button>
        <el-button v-hasPermi="['wx:wxuser:delete']" type="danger" :disabled="dataListSelections.length <= 0" @click="deleteHandle()">批量删除</el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button icon="el-icon-price-tag" type="success" @click="$refs.WxUserTagsManager.show()">标签管理</el-button>
        <el-button icon="el-icon-sort" type="success" @click="syncWxUsers()">同步粉丝</el-button>
      </el-form-item>
    </el-form>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;" @selection-change="selectionChangeHandle">
      <el-table-column type="selection" header-align="center" align="center" width="50" />
      <el-table-column prop="openId" header-align="center" align="center" label="openid" />
      <el-table-column prop="nickName" header-align="center" align="center" label="昵称" />
      <el-table-column prop="sex" header-align="center" align="center" label="性别" :formatter="sexFormat" />
      <el-table-column prop="city" header-align="center" align="center" label="城市" />
      <el-table-column prop="headImgUrl" header-align="center" align="center" label="头像">
        <img v-if="scope.row.headImgUrl" slot-scope="scope" class="headimg" :src="scope.row.headImgUrl">
      </el-table-column>
      <el-table-column prop="tagidList" header-align="center" align="center" label="标签" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-for="tagid in scope.row.tagidList" :key="tagid">{{ getTagName(tagid) }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="subscribeTime" header-align="center" align="center" label="订阅时间">
        <template slot-scope="scope">{{ $moment(scope.row.subscribeTime).calendar() }}</template>
      </el-table-column>
      <el-table-column prop="qrSceneStr" header-align="center" align="center" label="场景值" />
      <el-table-column prop="subscribe" header-align="center" align="center" label="是否关注">
        <span slot-scope="scope">{{ scope.row.subscribe?"是":"否" }}</span>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteHandle(scope.row.openid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页列-->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
    <wx-user-tags-manager ref="WxUserTagsManager" :visible="showWxUserTagsEditor" @close="showWxUserTagsEditor=false" />
    <wx-user-tagging ref="wxUserTagging" :wx-users="dataListSelections" />
  </div>
</template>

<script>
import WxUserTagsManager from '@/components/Future/Wx/wx-user-tags-manager'
import WxUserTagging from './wx-user-tagging'
import { mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import { tableInfo, crudUtil, sortUtil } from '@/utils/future/toolkit'
import { fetchWxUserList, syncWxUsers, deleteWxUsers } from '@/api/wx'
export default {
  components: {
    WxUserTagsManager, WxUserTagging, Pagination
  },
  data() {
    const tableData = {
      dataForm: {
        tagid: '',
        nickname: '',
        city: '',
        qrSceneStr: ''
      },
      showWxUserTagsEditor: false,
      dataListLoading: false,
      dataListSelections: [],
      showSearch: true, // 显示搜索条件
      queryParams: {},
      promotionDate: []

    }
    return Object.assign(tableData, tableInfo)
  },
  created() {
    this.getList()
  },
  computed: mapState({
    wxUserTags: state => state.wxUserTags.tags
  }),
  methods: {
    // 获取数据列表
    getList() {
      var that = this
      const queryParams = {}
      that.queryParams = queryParams
      crudUtil.getList(that, fetchWxUserList)
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => item.openid)
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteWxUsers(ids).then(response => {
          this.$message({ message: '操作成功', type: 'success', duration: 1500,
            onClose: () => { this.getList() }
          })
        })
      })
    },
    syncWxUsers() {
      syncWxUsers().then(response => {
        this.$modal.msgSuccess('同步任务已建立，请稍候刷新查看列表')
      })
    },

    sexFormat(row, column, cellValue) {
      const sexType = {
        0: '未知',
        1: '男',
        2: '女'
      }
      return sexType[cellValue]
    },
    getTagName(tagid) {
      const tag = this.wxUserTags.find(item => item.id == tagid)
      return tag ? tag.name : '?'
    }
  }
}
</script>
<style scoped>
.headimg{
    width: 50px;
    height: 50px;
    border-radius: 8px;
}
</style>
